<template>
	<view class="ye">
		<view class="top flex">
			<text>Balance</text>
			<text class="money">{{ye}}</text>
		</view>
		<view class="bottom flex">
			<view class="item flex" @click="toPage(0)">
				<image class="icon" style="width: 60rpx;" src="../../../../static/images/personal/btns-12.png"></image>
				<text>Recharge</text>
			</view>
			<view class="item flex" @click="toPage(1)">
				<image class="icon" src="../../../../static/images/personal/btns-13.png"></image>
				<text>Withdraw</text>
			</view>
		</view>
	</view>
</template>

<script>
	import fetch from '@/common/fetch.js';
	export default{
		data(){
			return{
				ye:''
			}
		},
		onShow(){
			let that = this
			fetch.request('/ucenter/home', '', 'POST').then(res => {
				 that.ye = res.data.usableSum
			});
		},
		methods:{
			toPage(index){
				let url = ''
				switch (index){
					case 0:
						url = '/pages/recharge/index'
						break;
					case 1:
					url="/pages/withdraw/index"
						break;
				}
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page,.ye{
		width: 100%;
		min-height: 100%;
	}
	.flex{
		display: flex;
	}
	.top{
		height: 320rpx;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		background: #F53D46;
		font-size: 12px;
		padding: 0 20rpx;
		.money{
			font-size: 26px;
			margin-top: 20rpx;
		}
	}
	.bottom{
		width: 710rpx;
		height: 100rpx;
		margin-left: 20rpx;
		border-radius: 20rpx;
		background: #fff;
		align-items: center;
		margin-top: -60rpx;
		.item{
			justify-content: center;
			flex:1;
			align-items: center;
			font-size: 16px;
			&:first-child{
				border-right: solid 1rpx #f4f4f4;
			}
			.icon{
				width: 50rpx;
				height: 50rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
